<template>
  <el-dialog v-model="dialogVisible" title="添加订单">
    <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="120px">
      <el-form-item label="预定场地" prop="venueId">
        <el-cascader v-model="selectArr" :options="option" :props="prop" placeholder="请选择场地" @change="handleChange" />
      </el-form-item>
      <el-form-item label="预定日期" prop="orderDate">
        <el-date-picker v-model="ruleForm.orderDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择预定日期"
          @change="getTime" />
      </el-form-item>
      <el-row :gutter="20" class="mb15">
        <el-col :span="10">
          <el-form-item label="预定开始时间" prop="startTime">
            <el-select v-model="ruleForm.startTime" placeholder="请选择预定时间">
              <el-option v-for="item in timeStartArr" :key="item.startTime" :label="item.startTime"
                :value="item.startTime" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="预定结束时间" prop="endTime">
            <el-select v-model="ruleForm.endTime" placeholder="请选择预定时间">
              <el-option v-for="item in timeEndArr" :key="item.endTime" :label="item.endTime" :value="item.endTime" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="金额" prop="transactionAmount">
        <el-input v-model.number="ruleForm.transactionAmount" placeholder="请输入金额" />
      </el-form-item>
      <el-form-item label="预订人" prop="orderUserName">
        <el-input v-model="ruleForm.orderUserName" placeholder="请输入预订人" />
      </el-form-item>
      <el-form-item label="联系方式" prop="phoneNumber">
        <el-input v-model.number="ruleForm.phoneNumber" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitRules(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { postOrderCreate, getVenueSiteInfo } from "@/api/area/index";

interface TimeModel {
  startTime: string;
  endTime: string;
  openStatus: string;
  price: Number;
}

const props = defineProps(["option"]);
const emits = defineEmits(["submitOrder"]);
const ruleFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
const selectArr = ref([]);
const timeStartArr = ref<TimeModel[]>([]);
const timeEndArr = ref<TimeModel[]>([]);
const ruleForm = reactive({
  orderDate: "", //下单日期
  venueId: "", //场馆id
  venueSiteId: "", //场地ID
  orderUserName: "", //预定人姓名
  phoneNumber: "", //联系人手机号
  remark: "", //备注
  transactionAmount: "", //金额
  startTime: "", //开始时间
  endTime: "" //结束时间
});

const rules = reactive<FormRules>({
  venueId: [
    { required: true, message: "请选择场地！", trigger: "blur" },
  ],
  orderDate: [
    { required: true, message: "请输入下单日期！", trigger: "blur" },
  ],
  orderUserName: [
    { required: true, message: "请输入预定人姓名！", trigger: "blur" },
  ],
  phoneNumber: [
    { required: true, message: "请输入联系人手机号！", trigger: "blur" },
  ],
  transactionAmount: [
    { required: true, message: "请输入金额！", trigger: "blur" },
  ],
  startTime: [
    { required: true, message: "请选择开始时间！", trigger: "blur" },
  ],
  endTime: [
    { required: true, message: "请选择结束时间！", trigger: "blur" },
  ],
});
const prop = ref({
  value: "venueId",
  label: "venueName",
  children: "siteList"
});

// 场地选择
const handleChange = (val: string) => {
  ruleForm.venueId = val[0];
  ruleForm.venueSiteId = val[1];
  getTime();
}
// 时间数据
const getTime = () => {
  if (ruleForm.venueId != "" && ruleForm.orderDate != "") {
    getVenueSiteInfo({ venueId: ruleForm.venueId, orderDate: ruleForm.orderDate }).then((res) => {
      let startArr: any = [], endArr: any = [];
      res.data.map((item: any) => {
        if (item.venueSiteId === ruleForm.venueSiteId) {
          item.venuePriceList.map((it: TimeModel) => {
            if (it.openStatus === "Y") {
              startArr.push(it)
              endArr.push(it)
            }
          })
        }
      })
      timeStartArr.value = startArr;
      timeEndArr.value = endArr;
    });
  }
}
// 提交创建订单按钮
const submitRules = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      postOrderCreate(ruleForm).then(res => {
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: res.msg,
          })
        }
        emits("submitOrder");
        formEl.resetFields();
        dialogVisible.value = false;
      })
    }
  })
};

// 取消按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};

defineExpose({
  dialogVisible,
});
</script>
<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
